<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>IOT</title>
    
    <meta name="description" content="impress.js is a presentation tool based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com." />
    <meta name="author" content="Bartek Szopka" />

    <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />

    <link href="css/impress-demo.css" rel="stylesheet" />
    <link href="js/styles/default.css" rel="stylesheet" />
	<link href="css/github.css" rel="stylesheet"/>
	<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
    </head>

<body class="impress-not-supported">

<div id="impress">


    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
        <q>最小物联网系统设计</q>Internet of Things
        <br>
        <q>
        <b>RESTful</b><br>
        <b>Ajax</b><br>
        <b>Serial Communication</b>
        </q>
    </div>

    <div class="step slide" data-x="0" data-y="-1500">
        <q>What it USE?</q>
        <q>
        <b> jQuery Mobile</b><b>Highchart</b><br>
        <b>Laravel(PHP)</b><br>
        <b> Raspberry PI</b><br>
        <b>Arduino</b><br>
        
        
        </q>
    </div>

    <div class="step slide" data-x="1000" data-y="-1500">
      <q>System architecture </q><br>
      <img src="imgs/struct.jpg" />
    </div>

    <div id="title" class="step" data-x="0" data-y="0" data-scale="6">
        <span class="try">http://b.phodal.com </span>
        <h1>/athome</h1>
        <span class="footnote">/1/edit</span>
    </div>

    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <q>o->o<-^->o->o</q>
        <br/><br/>
        <p>Browser(POST)->Server</p>
        <p>Raspberry PI(GET)<-Server</p>
        <p>Raspberry PI(SEND)->Arduino</p>
        <p>Arduino(H/L)->Led</p>
        
    </div>

    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>RESOURCES<b>RESTful</b> <span class="thoughts">Things<-->Things</span></p>
    </div>

    <div class="step slide" data-x="2825" data-y="2325"  data-rotate="300" data-scale="2">
 	<pre><code class="python" >import json,urllib2,serial

	    url="http://b.phodal.com/athome/1"
	    while True:
			status=json.load(urllib2.urlopen(url))[0]['led1']
			serialport=serial.Serial("/dev/ttyACM0",9600)
			if status==1 :
			    serialport.write('1')
			elif status==0:
			    serialport.write('0')</code></pre>
	<h2>Python do</h2>
	<p>Commucation with Server</p>
	<p>Commucation with Arduino</p>
    </div>

    <div class="step slide" data-x="3500" data-y="-850" data-rotate="270" data-scale="2">
        <q>JSON && AJAX</q> 
        <a class="various fancybox.iframe" href="http://www.google.com">Youtube (iframe)</a>
         AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）
		<p>.</p>
		<pre><code class="javascript">[{
			id: 1,
			temperature: 14,
			sensors1: 12,
			sensors2: 12,
			led1: 1
			}]</code></pre>

    </div>

    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p>Hardware<br/><b class="imagination">Arduino</b><br>Fidea</p>
    </div>

    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>Any Questions?</q>
    </div>

    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
     	<p>Code</p>
        <p>https://github.com/gmszone/iot/</p>
    </div>

    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
    	<p>Home Page</p>
        <p>http://iot.phodal.com/</p>
    </div>

    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>

<script src="js/impress.js"></script>
<script>impress().init();</script>

<script src="js/highlight.pack.js" type="text/javascript">></script>
<script type="text/javascript"> 
	hljs.tabReplace = '    ';
	hljs.lineNodes = true;
	hljs.initHighlightingOnLoad(); 
</script> 
<script src="js/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel.pack.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>

<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".various").fancybox({
			maxWidth	: 800,
			maxHeight	: 600,
			fitToView	: false,
			width		: '70%',
			height		: '70%',
			autoSize	: false,
			closeClick	: false,
			openEffect	: 'none',
			closeEffect	: 'none'
		});
	});
</script>

</body>
</html>